<!-- created:2023/2/4 23:54 By AdinZ -->
<template>
  <div class="AdList">
    <el-drawer v-model="visible" direction="rtl" size="80%" @close="$emit('close')" :with-header="false">
      <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>
    </el-drawer>
  </div>
</template>

<script>
import {activityStatus, activityStatuses} from "@/utils/shopkeeper";
import {parseTime} from "@/utils";
import TablePage from "@/components/TablePage/index.vue";

export default {
  components: {TablePage},

  name: "AdList",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    result: {
      type: Function
    }
  },
  watch: {
    show() {
      this.visible = this.show;
    }
  },
  data() {
    return {
      visible: false,
      query: [
        {
          type: 'text',
          label: '奖品标题',
          placeholder: '奖品标题搜索',
          key: 'title'
        },

        {
          type: 'select',
          label: '状态',
          placeholder: '选择状态',
          key: 'status',
          options: activityStatuses
        },
        {
          type: 'text',
          label: '店铺名字',
          placeholder: '店铺名字搜索',
          key: 'shopName'
        },
        {
          type: 'buttons',
          buttons: [
            {
              label: '首页抽奖',
              type: 'primary',
              callback: () => {
                this.adDialog.show = true
              }
            }
          ]
        }

      ],
      columns: [
        {
          label: '#',
          prop: '$index',
          width: '80px'
        },
        {
          label: '奖品名称',
          width: '100px',
          type: 'render',
          render: (data) => {
            return `<img src="${data.thumb}" style="width: 48px;height: 48px"/>`;
          }
        },
        {
          label: '活动标题',
          prop: 'title',
          width: '180px'
        },
        {
          label: '所属店铺',
          type: 'render',
          width: '240px',
          render: (data) => {
            if (!data.shop) return ''
            return `<div class="flex flex-center">
                        <img src="${data.shop.logo}" style="width: 48px;height: 48px"/>
                        <div style="padding-left: 15px;">${data.shop.name}</div>
                    </div>`;
          }
        },
        {
          label: '广告状态',
          type: 'render',
          width: '100px',
          render: (data) => {
            return activityStatus(data.status)
          },
        },
        {
          label: '广告时间',
          type: 'render',
          width: '330px',
          render: (data) => {
            return `${parseTime(data.startTime)}~${parseTime(data.endTime)}`;
          },
        },
        {
          label: '添加时间',
          type: 'render',
          width: '180px',
          render: (data) => {
            return parseTime(data.created);
          },
        }, {
          label: '操作',
          type: 'buttons',
          width: '100px',
          fixed: true,
          buttons: [
            {
              label: '选择',
              type: 'primary',
              styles: {},
              icon: 'Check',
              callback: (data) => {
                this.visible = false;
                if (this.result)
                  this.result(data)
              }
            }
          ]
        }
      ],
      data: {
        total: 0,
        list: [],
        page: 1,
        size: 40
      },
    }
  },
  created() {
  },
  methods: {
    onload(data) {
      this.data.page = data.page;
      this.data.size = data.size;
      Object.assign(data, {
        direction: 'DESC',
        properties: ['id']
      })
      this.$api.apiQuery('/api/manage/activity-ad/', data).then(res => {
        this.data.list = res.data;
        this.data.total = res.total;
      })
    },
  }
}
</script>

<style scoped lang="scss">
.AdList {

}
</style>
